import React, { Component, Fragment } from 'react';
import { Icon, Form, Input, Modal, Select, Row, Col } from 'antd';
import { connect } from 'dva';

import AdModal from '@/components/AdModal';
import AntdForm from '@/components/AntdForm';
import AdSelect from '@/components/AdSelect';
import AntdInput from '@/components/AntdInput';
import AntdFormItem from '@/components/AntdFormItem';
import AntdSelectRegion from '@/components/AntdSelectRegion';
import { formItemFragement, queryDict } from '@/utils/common';
import { codes, allDispatchType, allUrl } from './utils';
import { allDictList } from '@/utils/constans';
import styles from '@/pages/Info.less';

@connect(({ PartsLib, component }) => ({
  PartsLib,
  dictObject: component.dictObject,
  partsOfferDict: component.partsOfferDict,
}))
@Form.create()
export default class OperateInfo extends Component {
  state = {};
  componentWillMount() {
    const allDict = [allDictList.partsType, allDictList.partsUnit];
    queryDict({ props: this.props, allDict });
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.queryPartsOfferDict,
      payload: {
        params: {},
        url: allUrl.partsHierList,
      },
    });
  }
  // 新增或编辑操作
  handleOk = () => {
    const {
      form,
      dispatch,
      id,
      PartsLib: { partsDetails },
      getPartsList,
      setExpandedKeys,
      handleType,
    } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { parentId, ...value } = values;
      if (Array.isArray(parentId) && parentId.length > 0) {
        value.parentId = parentId[parentId.length - 1];
      } else {
        value.parentId = '';
      }
      if (id && handleType === 'edit') {
        value.id = id;
      }
      dispatch({
        type: allDispatchType.operate,
        payload: value,
        callback: res => {
          this.handleCancel();
          getPartsList();
          if (id) {
            setExpandedKeys(id);
            dispatch({
              type: allDispatchType.detail,
              payload: { id },
            });
          }
        },
      });
    });
  };

  handleCancel = () => {
    const { setModalOperate } = this.props;
    setModalOperate();
  };
  render() {
    const {
      visible,
      form,
      PartsLib: { partsDetails },
      id,
      handleType,
      dictObject,
      selectedKey,
      partsOfferDict,
    } = this.props;
    const modeEdit = handleType == 'edit' ? true : false;

    //新增时，若选中左侧菜单，上级默认为选中的菜单
    const parentIds = partsDetails[id] ? partsDetails[id].allParentIds : '';
    const detail = modeEdit && partsDetails[id] ? partsDetails[id] : {};
    const getFieldDecorator = form.getFieldDecorator;
    const commonParams = {
      getFieldDecorator,
    };
    const formItem = [
      [
        <AntdFormItem label="上级" code="parentId" initialValue={parentIds} {...commonParams}>
          <AntdSelectRegion
            url="tms/tms-parts/selectTmsPartsHierList"
            filter={false}
            isParent={modeEdit ? true : false}
            isRate={true}
            split="/"
            showSplit=" => "
            data={partsOfferDict}
          />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="类型"
          code="type"
          initialValue={detail.type}
          rules={[{ required: true }]}
          {...commonParams}
        >
          <AdSelect isExist={true} data={dictObject[allDictList.partsType]} />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="配件编号"
          code="allParentNos"
          initialValue={detail.allParentNos || '保存后自动生成'}
          {...commonParams}
        >
          <AntdInput disabled={true} />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="配件名称1"
          code="partsName1"
          initialValue={detail.partsName1}
          rules={[{ required: true }]}
          {...commonParams}
        >
          <AntdInput />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="配件名称2"
          code="partsName2"
          initialValue={detail.partsName2}
          {...commonParams}
        >
          <AntdInput />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem
          label="配件名称3"
          code="partsName3"
          initialValue={detail.partsName3}
          {...commonParams}
        >
          <AntdInput />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem label="单位" code="unit" initialValue={detail.unit} {...commonParams}>
          <AdSelect isExist={true} data={dictObject[allDictList.partsUnit]} />
        </AntdFormItem>,
      ],
    ];

    return (
      <Fragment>
        {visible && (
          <AdModal
            visible={visible}
            title={!modeEdit ? '新增' : '编辑'}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            width="600px"
          >
            <AntdForm>{formItemFragement(formItem)}</AntdForm>
          </AdModal>
        )}
      </Fragment>
    );
  }
}
